<template>
    <div class="loginInputTipLine">
      <div :class="appendixClass"></div>
    </div>
</template>

<script lang="ts">
import { computed } from 'vue'
import inputDividerType from '@/assets/PublicStaticValue/components/loginRegisterPage/Login/inputDividerType'
export default {
  name: 'inputDivider',
  props: {
    type: Number
  },
  setup (props: any) {
    const appendixClass = computed(() => {
      var inputClass = 'inputBlur'
      switch (props.type) {
        case inputDividerType.blur: {
          inputClass = 'inputBlur'
          break
        }
        case inputDividerType.focus: {
          inputClass = 'inputFocus'
          break
        }
        case inputDividerType.error: {
          inputClass = 'inputError'
          break
        }
      }
      return inputClass
    })
    return {
      appendixClass
    }
  }
}
</script>

<style lang="scss" scoped>
.loginInputTipLine{
  width: 100%;
  height: 0;
  border-bottom: 2px solid rgb(233, 233, 235);
  div{
    height: 0;
    transition: 0.5s;
  }
}
.inputBlur{
  width: 0;
  border-bottom: 2px solid transparent;
}
.inputFocus{
  width: 100%;
  border-bottom: 2px solid #409EFF;
}
.inputError{
  width: 100%;
  border-bottom: 2px solid #F56C6C;
}
</style>
